import 'package:auto_route/auto_route.dart';
import 'package:distribution_mall_flutter/assets.dart';
import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/constant/status_constant.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/provider/order/order_logistics.dart';
import 'package:distribution_mall_flutter/utils/common_widget.dart';
import 'package:distribution_mall_flutter/utils/image_loader.dart';
import 'package:distribution_mall_flutter/utils/utils.dart';
import 'package:distribution_mall_flutter/widgets/card.dart';
import 'package:distribution_mall_flutter/widgets/list_item.dart';
import 'package:distribution_mall_flutter/widgets/shimmer.dart';
import 'package:distribution_mall_flutter/widgets/track_line.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';

@RoutePage()
class OrderLogisticsPage extends ConsumerStatefulWidget {
  // final String distributionOrderId;
  final String bizOrderNumber;
  final String state;
  const OrderLogisticsPage({
    super.key,
    @pathParam required this.state,
    @pathParam required this.bizOrderNumber,
  });
  @override
  createState() => _OrderLogisticsPage();
}

class _OrderLogisticsPage extends ConsumerState<OrderLogisticsPage> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ref.read(orderLogisticsProvider.notifier).routeInfoQuery({
        'bizOrderNumber': widget.bizOrderNumber,
      });
      ref.read(orderLogisticsProvider.notifier).queryList({
        'distributionOrderId': widget.bizOrderNumber,
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final logModal = ref.watch(orderLogisticsProvider);
    return Scaffold(
        backgroundColor: ColorConstant.pageGreyBg,
        appBar: AppBar(
          scrolledUnderElevation: 0,
          backgroundColor: Colors.white,
          title: Text(OrderStatusEnum.getStatusText(widget.state)),
          centerTitle: true,
          leading: Padding(
            padding: const EdgeInsets.only(left: 16),
            child: CommonBtnWidget.arrowBack(),
          ),
        ),
        body: EPShimmer(
          enabled: logModal.loading,
          child: Skeleton.leaf(
              child: SingleChildScrollView(
            child: Column(
              children: [
                ...(logModal.formatPackageList
                    .map((item) => EPCard(
                        margin: const EdgeInsets.fromLTRB(EdgeConstant.edge20,
                            EdgeConstant.edge10, EdgeConstant.edge20, 0),
                        padding: const EdgeInsets.symmetric(
                            horizontal: EdgeConstant.edge10,
                            vertical: EdgeConstant.edge20),
                        enableClickEffect: false,
                        child: DefaultTextStyle(
                          style: const TextStyle(
                            color: Colors.black45,
                            fontSize: FontConstant.f11,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // Text()
                              GestureDetector(
                                onTap: () {
                                  Utils.copy(item['number']);
                                },
                                child: Row(
                                  children: [
                                    Text(
                                      item['name'],
                                      style: const TextStyle(
                                          color: ColorConstant.black45,
                                          fontSize: FontConstant.f11),
                                    ),
                                    const Icon(
                                      Icons.content_copy,
                                      size: 15,
                                      color: Color.fromRGBO(22, 119, 255, 1),
                                    )
                                  ],
                                ),
                              ),
                              // GestureDetector(
                              //   onTap: () {},
                              //   child: Row(
                              //     children: [
                              //       Text(
                              //         S.current.order_go_to_log,
                              //         style: const TextStyle(
                              //             color:
                              //                 Color.fromRGBO(116, 115, 115, 1)),
                              //       ),
                              //       CommonBtnWidget.arrowRight(
                              //           size: 14,
                              //           color: const Color.fromRGBO(
                              //               116, 115, 115, 1))
                              //     ],
                              //   ),
                              // )
                            ],
                          ),
                        )))
                    .toList()),
                EPCard(
                    minHeight: 200,
                    margin: const EdgeInsets.fromLTRB(EdgeConstant.edge20,
                        EdgeConstant.edge10, EdgeConstant.edge20, 0),
                    padding: const EdgeInsets.fromLTRB(
                        0, EdgeConstant.edge20, 10, EdgeConstant.edge20),
                    enableClickEffect: false,
                    child: TrackLine<FormatTrckLineEntity>(
                      data: logModal.formatRouteInfo,
                      activeIndex: 0,
                      pointTop: 5,
                      titleBuilder: (item, index) {
                        return SizedBox(
                          width: double.infinity,
                          child: Wrap(
                            runAlignment: WrapAlignment.start,
                            children: [
                              Text(
                                item.name ?? '',
                                style: TextStyle(
                                    color: ColorConstant.black51,
                                    fontSize: FontConstant.f14,
                                    fontWeight: index == 0
                                        ? FontWeight.bold
                                        : FontWeight.normal),
                              ),
                              const SizedBox(
                                width: 5,
                              ),
                              Text(
                                Utils.getTime(item.time) ?? '',
                                style: const TextStyle(
                                  color: ColorConstant.grey136,
                                  fontSize: FontConstant.f10,
                                ),
                              )
                            ],
                          ),
                        );
                      },
                      cotentBuilder: (item, index) {
                        return Container(
                          alignment: Alignment.topLeft,
                          padding: const EdgeInsets.only(
                              top: EdgeConstant.edge5,
                              bottom: EdgeConstant.edge20),
                          child: Text(
                            item.des ?? '',
                            textAlign: TextAlign.left,
                            style: const TextStyle(
                              color: Color.fromRGBO(107, 108, 109, 1),
                              fontSize: FontConstant.f12,
                            ),
                          ),
                        );
                      },
                    )),
                // EPCard(
                //     margin: const EdgeInsets.fromLTRB(
                //         EdgeConstant.edge20,
                //         EdgeConstant.edge10,
                //         EdgeConstant.edge20,
                //         EdgeConstant.edge10),
                //     padding: const EdgeInsets.symmetric(
                //         horizontal: 0, vertical: EdgeConstant.edge20),
                //     enableClickEffect: false,
                //     child: EPListItem(
                //         padding: const EdgeInsets.symmetric(
                //             horizontal: EdgeConstant.edge10),
                //         showLeftIcon: true,
                //         leftIcon: ImageLoader.imageAsset(
                //             Assets.assets_icons_order_logistics_package_png,
                //             hasRoot: false,
                //             width: 30,
                //             height: 30),
                //         center: Expanded(
                //           child: Text(
                //             S.current.order_log_text('xxxx'),
                //             style: const TextStyle(
                //                 color: ColorConstant.black45,
                //                 fontSize: FontConstant.f14),
                //           ),
                //         )))
              ],
            ),
          )),
        ));
  }
}
